<template>
  <div class="chuantu" style="position: relative;">
    <div v-if="img" style="margin-bottom: 20px;">已上传：<a :href="img" target="_blank" style="color: rgb(0, 90, 255);">{{imgname}}</a></div>
    <el-upload action="#" :on-change="uploadok"   accept=".pdf" :auto-upload="false" :show-file-list="false">
      <el-button type="primary" plain round >点击上传</el-button>
    </el-upload>

  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import axios from "axios";
  export default {
    name: 'chuantu',
    props:['imgs','widths','heights','shows','bg','txt','widths2','heights2','buyaoshanchu','pdf'],
    data() {
      return {
        img: "",
        show:false,
        imgname:""
      }
    },
    created() {
      console.log(this.txt)
      if(this.imgs){
        console.log(this.imgs)
        this.img = this.imgs
      }

      if(!this.widths){
        this.widths = '600px'
      }
      if(!this.heights){
        this.heights = '100px'
      }
      if(!this.bg){
        this.bg = 'transparent'
      }
      this.tubiaocss = {
        // width:this.widths,
        // height:this.heights,
        // lineHeight:this.heights,
        background:this.bg
      }
      this.zuidacss = {
        // width:this.widths,
        // height:this.heights,
      }
    },
    methods: {
      getRandomChar:function(len = 11)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      //单个图片上传
      uploadok: function(file) {
        let name = this.getRandomChar() + '.' + file.raw.name.split('.')[1]

        var that = this
        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){

              const observer = {
                next(res){
                  console.log(res)
                  // ...
                },
                error(err){
                  console.log(err)
                  // ...
                },
                complete(res){
                  that.img = 'https://gperson.gantanhaokeji.top/'+ res.key
                  that.$emit('getimg',that.img)
                  that.imgname = file.raw.name
                  // https://test91.91haoka.cn/500px1051021934.jpg
                  // ...
                }
              }

              const observable = qiniu.upload(file.raw,name, response.data.data.token, {}, {})

              const subscription = observable.subscribe(observer) // 上传开始

            }else{
              this.$message.error(response.data.msg.info);
            }
          });


      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

    .avatar-uploader{
    	// border: 1px dashed #d9d9d9;
    	border-radius: 6px;
    	cursor: pointer;
    	position: relative;
    	overflow: hidden;
      /deep/ .el-upload{ display: block;}
    }

    .avatar-uploader .el-upload:hover {
    	border-color: #409EFF;
    }

    .avatar-uploader-icon {
    	font-size: 28px;
    	color: #8c939d;

    	text-align: center;
    }

    .avatar {
    	// max-width: 194px;
    	// max-height: 194px;
    	display: block;
      img{width: 100%; display: block;}
    }
    .genghuan{ display: none;}
    .chuantu:hover{
      .genghuan{ display: block;}
    }
</style>
